<template>
    <div>
        <!-- 顶部标签 -->
        <van-nav-bar title="新的好友" left-text="返回" left-arrow
            @click-left="$router.go(-1)"
        />
        <!-- 好友申请列表 -->
        <van-cell center border
            v-for="(item, index) in applications"
            :key="index"
        >
            <template #icon>
                <van-image round fit="cover" width="3.125rem" height="3.125rem"
                    :src="is_user(item) ? item.receiver.headImgUrl : item.sender.headImgUrl"
                />
            </template>
            <template #title>
                <div>{{ is_user(item) ? item.receiver.nickname : item.sender.nickname }}</div>
                <div class="postscript">附言：{{ item.postscript }}</div>
            </template>
            <template v-if="!is_user(item) && item.status == 0">
                <van-button class="repulse" type="danger" size="small"
                    @click="handleRequests(item._id, 2)"
                >拒绝</van-button>
                <van-button type="primary" size="small"
                    @click="handleRequests(item._id, 1)"
                >同意</van-button>
            </template>
            <template v-else>
                <p>{{ friend_request_result(item.status, is_user(item)) }}</p>
            </template>
        </van-cell>

        <van-empty class="custom-image" image="imges/custom-empty-image.png" description="暂无好友申请"
             v-if="applications.length <= 0"
        />
    </div>
</template>

<script>
    import { Toast } from 'vant';
    import { mapActions, mapMutations, mapState } from 'vuex';

    export default {
        name: "NewFriend",
        computed: {
            ...mapState(["user"]),
            ...mapState('newFriend', ["applications"])
        },
        methods: {
            ...mapMutations(["upFriend"]),
            ...mapMutations('newFriend', ['upApplicationStatus']),
            ...mapActions('newFriend', ['handleFriendRequest']),
            ...mapActions('login', ['getFriends']),
            async handleRequests(applications_id, status) {         // 处理好友请求 status (1: 同意, 2: 拒绝)
                let res = await this.handleFriendRequest({ applications_id, status });
                
                // 根据不同状态显示不同提示
                if (status === 1) {  // 同意好友请求
                    if (res.status_code === 200) {
                        Toast.success(res.info || '已同意好友请求');
                    } else {
                        Toast.fail(res.info || '操作失败');
                        return;
                    }
                } else if (status === 2) {  // 拒绝好友请求
                    Toast.success('已拒绝好友请求');
                }

                // 更新好友列表
                if (status === 1 && res.status_code === 200) {
                    let res_friend = await this.getFriends(this.user.phone);
                    if (res_friend.status_code != 200) {
                        Toast.fail(`好友获取失败: ${res_friend.error}`);  
                        return;
                    }   
                    
                    let arr = [];
                    res_friend.friends.forEach(item => arr.push(item));
                    this.upFriend(arr);
                }

                // 处理本地应用状态
                if (status === 1) { // 同意好友请求
                    // 删除本地的这条好友请求
                    const requestIndex = this.applications.findIndex(item => item._id === applications_id);
                    if (requestIndex !== -1) {
                        this.applications.splice(requestIndex, 1);
                    }
                } else { // 拒绝好友请求
                    delete res.status_code;
                    this.upApplicationStatus(res);
                }
            },
            is_user(value) {
                if (value.sender._id == this.user._id)
                    return true;
                else
                    return false;
            },
            friend_request_result(value, is_user) {
                switch(value) {
                    case 0:
                        return '等待对方处理';
                    case 1:
                        if (is_user)
                            return '对方已同意';
                        else
                            return '已同意';
                    case 2:
                        if (is_user)
                            return '对方已拒绝';
                        else
                            return '已拒绝';
                }
            },
        },
    }
</script>

<style lang="less" scoped>
    .cell-title {
        display: flex;
        align-items: center;
        span {
            margin-left: 10px;
        }
    }
    .custom-image {
        margin-top: 40%;
    }
    .van-image {
        margin-right: .625rem;
    }
    .repulse {
        margin-right: .625rem;
    }
</style>